<template>
<div class="card-search field has-addons">
  <div class="control">
    <input v-model="toSearch" class="input is-large" type="text" @keyup="willSearch"
           name="toSearch" placeholder="e.g hd">
  </div>
  <div class="select control">
    <select v-model="inField" @change="willSearch" class="select is-large">
      <option v-for="field in enabledFields" :field="field" :key="field.name">{{ field.name }}</option>
  </select>
</div>
  <!-- <p class="help">This is a help text</p> -->
</div>
</template>

<script>
export default {
  name: 'CardSearch',
  data: function () {
    return {
      enabledFields: [],
      toSearch: '',
      inField: ''
    }
  },
  mounted: function () {
    this.initOptions()
  },
  methods: {
    initOptions: function () {
      const vm = this
      this.$db.settings.find({ section: 'fields', in: 'search', role: 'key' }, { name: 1, _id: 0 }).exec(function (err, docs) {
        if (err) {
          console.log(err)
        }
        vm.enabledFields = docs
      })
      this.$db.settings.findOne({ section: 'fields', in: 'search', role: 'keyDefault' }, { name: 1, _id: 0 }).exec(function (err, doc) {
        if (err) {
          console.log(err)
        }
        if (doc !== null) vm.inField = doc.name
      })
    },
    willSearch: function () {
      this.$emit('will-search', this.toSearch, this.inField)
    }
  }
}
</script>

<style>
</style>
